<template>
  <div class="itemStyle" v-if="itemObj.show">
    <div
      class="borHeader border-b border-r h-12 text-center leading-10"
      v-if="index == 0"
    >
      {{ itemObj.language_name }}
      <span
        class="ml-1 base-red-color"
        v-if="itemObj.language_id == 1 || itemObj.language_id == 2"
        >*</span
      >
    </div>
    <div class="inputStyle p-2 border-r border-b">
      <el-input v-model="itemObj.title" placeholder="请输入" />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
  index: {
    type: Number,
  },
});
const itemObj = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit("update:modelValue", val);
  },
});
</script>

<style lang="scss" scoped>
.itemStyle {
  min-width: 80px;
  flex: auto;

  .inputStyle {
    .attribute {
      height: 32px;
      display: inline-block;
      line-height: 32px;
    }
  }

  &:last-child {
    border-bottom: 0;

    .borHeader {
      border-right: 0;
      border-bottom: 0;
    }

    .inputStyle {
      border-right: 0;
    }
  }
}

.borHeader {
  background: #fafafa;
  box-shadow: 0px 1px 0px 0px #e6e7e9;
  line-height: 48px;
  border-bottom: 0;
}
</style>
